<template>
  <div class="app-container">
    <el-form :model="searchForm" :inline="true">
      <el-row>
        <el-col :span="19">
          <el-form-item>
            <el-input
              v-model="searchForm.offerId"
              placeholder="关联报价单号"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searchForm.projectName"
              placeholder="项目名称"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="iconfont icon-chaxun1"
              @click="handleSearch"
            >
              查询</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="5" class="search-right">
          <el-button type="text" icon="el-icon-refresh" @click="handleSearch"
            >刷新</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-table
      class="table-fixed-class"
      border
      :data="offermonreviewData"
      stripe
      highlight-current-row
      :header-cell-style="{ background: '#ECF3FC' }"
    >
      <el-table-column prop="projectName" label="项目名称" align="center" />
      <el-table-column
        prop="consignorName"
        label="监测方案名称"
        align="center"
      />
      <el-table-column prop="offerId" label="关联任务单号" align="center" />
      <el-table-column
        prop="reviewUserName"
        label="方案审核人"
        align="center"
      />
      <el-table-column prop="" label="方案编制人" align="center" />
      <el-table-column prop="finishDate" label="创建时间" align="center" />
      <el-table-column prop="schemeStatus" label="方案状态" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.schemeStatus == '0'"
            ><el-tag
              effect="dark"
              style="width: 58px;background: #82848a;border:none"
              >待编制</el-tag
            ></span
          >
          <span v-if="row.schemeStatus == '1'"
            ><el-tag
              effect="dark"
              style="width: 58px;background: #1890ff;border:none"
              >待提交</el-tag
            ></span
          >
          <span v-if="row.schemeStatus == '2'"
            ><el-tag
              effect="dark"
              style="width: 58px;background: #e8af38;border:none"
              >待评审</el-tag
            ></span
          >
          <span v-if="row.schemeStatus == '3'"
            ><el-tag
              effect="dark"
              style="width: 58px;background: #13ce66;border:none"
              >完成</el-tag
            ></span
          >
          <span v-if="row.schemeStatus == '4'"
            ><el-tag
              effect="dark"
              style="width: 58px;background: #ff4949;border:none"
              >驳回</el-tag
            ></span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="reviewExplanation"
        label="评审说明"
        align="center"
      />
      <el-table-column label="操作" fixed="right" align="center" width="240px">
        <template slot-scope="{ row }">
          <div
            style="border:1px solid #e6ebf5;margin: -1px -11px -1px -11px;padding-top: 5px;padding-bottom: 2px;"
          >
            <el-button
              type="text"
              v-if="row.schemeStatus == '2'"
              @click="downloadMonScheme(row)"
              >方案下载</el-button
            >
            <el-button
              type="text"
              v-if="row.schemeStatus == '2' && FashArr == 'Fash'"
              @click="judgeRecordMonReview(row)"
              >评审</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchForm.pageNumber"
        :limit.sync="searchForm.pageSize"
        @pagination="handleSearch"
      />
    </div>

    <!-- 方案评审 -->
    <el-dialog
      title="方案评审"
      :visible.sync="reviewmonVisible"
      center
      width="33%"
      max-height="300px"
    >
      <div style="width: 500px;margin:0 auto">
        <el-form :model="reviewmonForm" label-width="80px">
          <el-form-item label="评审判定:">
            <el-radio-group v-model="reviewmonForm.reviewStatus">
              <el-radio label="1">通过</el-radio>
              <el-radio label="2">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="reject" label="评审意见:">
            <el-input
              v-model="reviewmonForm.reviewExplanation"
              maxlength="30"
              style="width:85%"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="margin-top: -30px;">
        <el-button @click="reviewmonVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmJudgeRecordMonReview"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInfo } from "@/api/user";
import Pagination from "@/components/Pagination";
import * as orderServer from "@/api/offer";
import * as offermonitorServer from "@/api/offermonitor";

export default {
  components: { Pagination },
  data() {
    return {
      FashArr: "",
      searchForm: {
        offerId: "",
        projectName: "",
        pageNumber: 1,
        pageSize: 10,
        schemeStatus: "2"
      },
      total: 0,
      offermonreviewData: [],
      reviewmonVisible: false,
      reviewmonForm: {
        reviewStatus:"1"
      }
    };
  },

  created() {
    this.handleSearch();
    this.getList();
  },

  methods: {
    handleSearch() {
      // offermonitorServer.findOfferMonitorReview(this.searchForm).then(res => {
      //   if (res.code === 200 && res.result) {
      //     this.offermonreviewData = res.result.records || []
      //     this.total = res.result.total
      //   }
      // })
      orderServer.getfindsContInfosNew(this.searchForm).then(res => {
        this.offermonreviewData = [];
        if (res.code === 200) {
          res.result.records.forEach(item => {
            if (item.schemeStatus == "2") {
              this.offermonreviewData.push(item);
            }
          });
          this.total = res.result.total;
        }
      });
    },

    getList() {
      getInfo().then(res => {
        res.result.roles.forEach(item => {
          if (item == "Fash") {
            this.FashArr = item;
          }
        });
        this.reviewmonForm.reviewUserId = res.result.userId;
      });
    },

    // 评审
    judgeRecordMonReview(row) {
      this.getList();
      this.reviewmonForm.offerId = row.offerId;
      this.reviewmonVisible = true;
    },

    // 保存评审
    confirmJudgeRecordMonReview() {
      offermonitorServer
        .judgeRecordMonitorReview(this.reviewmonForm)
        .then(res => {
          if (res.code === 200) {
            this.$notify({
              title: "成功",
              message: res.message,
              type: "success"
            });
            this.reviewmonVisible = false;
            this.handleSearch();
          } else {
            this.$notify({
              title: "失败",
              message: res.message,
              type: "error"
            });
          }
        });
    },

    // 原始或者最新方案下载
    downloadMonScheme(row) {
      offermonitorServer.trainFile({ type: 1, id: row.offerId }).then(res => {
        if (res.code === 200) {
          if (res.result.length != 0) {
            var arr = res.result.length - 1;
            var url = res.result[arr].url;
            window.open(url);
          } else {
            this.$message.error("上传方案为空！");
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="scss" type="text/scss">
.search_div {
  > div {
    &:nth-child(1) {
      margin-right: 10px;
    }
    display: inline-block;
  }
}
.search_input {
  width: 200px;
  margin-bottom: 5px;
}
.search-right {
  text-align: right;
  padding-right: 25px;
}
.item {
  font-size: 16px;
}
::v-deep .el-card .el-card__header {
  padding: 5px 20px;
  background: #f3f2f2;
}
.apostrophe {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.table2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
/deep/ .vue-treeselect--disabled .vue-treeselect__single-value {
  color: #909399;
}
.container2 {
  width: 680px;
  height: 620px;
  overflow: auto;
  overflow-x: hidden;
  margin-left: 250px;
  margin-top: -525px;
}
/deep/ .wl-transfer .transfer-main {
  padding: 10px;
  height: calc(100% - 80px);
  box-sizing: border-box;
  overflow: auto;
}
.table-fixed-class /deep/ .el-table__fixed-right {
  height: 100% !important;
}
.el-button {
  user-select: unset;
}
</style>
